<template>
	<view>
		<view id="wrap" >
		    <view id="inner">
		      <view class="item" v-for="item in  mobileList" style="margin-left:90rpx;">
		        {{item}}
		      </view>
		      
		    </view>
		  </view>
		
		 <!-- <view id="wrap" style="margin-top: 30rpx;">
		    <view id="inner">
		      <view class="item" v-for="item in  mobileList">
		        {{item}}
		      </view>
		    </view>
		  </view> -->
	</view>
</template>

<script>
	export default {
		name:"roll-left-mobile",
		data() {
			return {
				mobileList: [
				      '177***  1分钟前  领取成功',
				      '138***  1分钟前  领取成功',
				      '181***  1分钟前  领取成功',
				      '139***  1分钟前  领取成功',
				      '177***  1分钟前  领取成功',
				      '138***  1分钟前  领取成功',
				      '181***  1分钟前  领取成功',
				      '139***  1分钟前  领取成功',
				    ]
			};
		}
	}
</script>

<style lang="scss" scoped>
#wrap {

  overflow: hidden;
  position: relative;
  /* width: 800rpx; */
  height: 58rpx;
  white-space: nowrap;

}

#inner {
  position: absolute;
  animation: slide 5s linear infinite;
}

.item {

  display: inline-block;
  width: 328rpx;
  height: 49rpx;
  line-height: 49rpx;
 
  text-align: center;
  border-radius: 25rpx;
  box-sizing: border-box;
  margin-left: 30rpx;

  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 22rpx;
  color: #FFFFFF;
  width: 264rpx;
  height: 54rpx;
  background: rgba(37,159,200,0.73);
  border-radius: 27rpx;

}


@keyframes slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-25%);
  }
}
</style>